<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="/api/localStorage"
    
    drag
    :headers="headers"
    :before-upload="beforeUpload"
    :on-success="handleFilUploadSuccess"
    :on-remove="handleRemove"
    :on-error="handleUploadError"
    :on-progress="uploadFileProcess"
  >
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">
      上传文件大小不超过100MB
    </div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },

    //上传检测
    beforeUpload(file) {
      // console.log(file);
      let isLt2M = true;
      isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.loading = false;
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      // this.form.name = file.name
      return isLt2M;
    },
    // 文件上传成功时的函数
    handleFilUploadSuccess(res, file, fileList) {
      // console.log(res);
      this.$message.success(res.data);
      this.$refs.upload.clearFiles();
      this.dialogVisible = false;
    },
    //文件上传过程中的函数(在这里获取进度条的进度)
    uploadFileProcess(event, file, fileList) {
      console.log(event);
      console.log(file);
      console.log(fileList);
      if (event.percentage == 100) {
      } else {
        
        event.progressPercent = Math.abs(event.percentage.toFixed(0));
      }
    },

    // 文件上传失败时的函数
    handleUploadError(err, file, fileList) {
      console.log(err.response.data.message);
      this.$message.error(err.response.data.message);
    }
  }
};
</script>


